<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <title>Document</title>
    <style>
      table{
        border-spacing: 4px 0;
            margin-left: -4px;
            margin-bottom: 20px;

      }
      td,
        th {
            width: 150px;
            height: 50px;
            font-size: 20px;
            text-align: center;
            margin-bottom: 0 !important;
            border: 1px solid gray;
        }
        input{
            width: 300px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <main id="app">
       <div>
           <table>
               <tr>
                   <th>商品名称</th>
                   <th>商品价格</th>
                   <th>商品数量</th>
                   <th>操作</th>
               </tr>
               <tr v-for='(goods ,index) in goodsList'>
                   <td>{{goods.goodName}}</td>
                   <td>{{goods.price}}</td>
                   <td>
                       <first-com @numchange='refreshNum' :products='goodsList' :i='index'></first-com>
                   </td>
                   <td>
                       <button class="delete" @click='deleteGoods(index)'>删除</button>
                   </td>
               </tr>
           </table>
           <br>
           <input type="text">
           <input type="text">
       </div>
    </main>
    <script id="first" type="text/html">
       <div>
           <button @click='jian()'>-</button>
           <span>{{products[i].num}}</span>
           <button @click='jia()'>+</button>
       </div>
    </script>
    <script>
    Vue.component('first-com',{
        template:'#first',
        props:['i','products'],
        data() {
                return {
                    goodsNum: this.products[this.i].num
                }
            },
          methods: {
                jian() {
                    if (this.goodsNum == 0) {
                        return
                    }
                    this.$emit('numchange', { shop: this.i, newNum: --this.goodsNum })
                },
                jia() {
                    if (this.goodsNum == 10) {
                        return
                    }
                    this.$emit('numchange', { shop: this.i, newNum: ++this.goodsNum })
                },
            },

    })
     var vue = new Vue({
         el:'#app',
         data:{
            goodsList:[
                {
                    goodName:'火腿肠',
                    price:2,
                    num:6
                },{
                    goodName:'小小酥',
                    price:2,
                    num:3
                },{
                    goodName:'卤蛋',
                    price:1.5,
                    num:9
                }
            ],
            user:'',
            addres:''
         },
         methods:{
            refreshNum(value) {
                    this.goodsList[value.shop].num = value.newNum
                },
            deleteGoods(value) {
                    this.goodsList.splice(value, 1)
                }
         }
     })
    </script>
</body>
</html>